<template>
  <div class="home-container">
    <!-- 搜索框 -->
    <van-search
      v-model="value"
      shape="round"
      background="#ea0003"
      placeholder="请输入搜索关键词"
    />
     <!-- / 搜索框 -->

    <!-- 搜索栏下面的图片 -->
    <div class="photo">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <van-image
            width="9rem"
            height="6rem"
            fit="contain"
            src="http://pic.5tu.cn/uploads/allimg/1904/pic_5tu_big_2019033101039037868.jpg"
          />
        </van-swipe-item>
        <van-swipe-item>
          <van-image
            width="9rem"
            height="6rem"
            fit="contain"
            src="http://pic.5tu.cn/uploads/allimg/1904/pic_5tu_big_2019033101039037868.jpg"
          />
        </van-swipe-item>
        <van-swipe-item>
          <van-image
            width="9rem"
            height="6rem"
            fit="contain"
            src="http://pic.5tu.cn/uploads/allimg/1904/pic_5tu_big_2019033101039037868.jpg"
          />
        </van-swipe-item>
      </van-swipe>

    </div>
    <!-- / 搜索栏下面的图片 -->

    <!-- 圆巴巴 -->
    <div class="yuanxing">
      <ul class="yuan-top" ref="topUlRef">
        <li @click="$router.push('/goods')">
          <span>
            <img src="../../photo/食品_蔬菜.png" alt="">
          </span>
          <i style="left:5px">蔬菜区</i>
        </li>
        <li>
          <span>
            <img src="../../photo/食品_橙子.png" alt="">
          </span>
          <i style="left:5px">水果区</i>
        </li>
        <li>
          <span>
            <img src="../../photo/食品_牛奶.png" alt="">
          </span>
          <i >奶制品</i>
        </li>
        <li>
          <span>
            <img src="../../photo/休闲食品.png" alt="">
          </span>
          <i>休闲食品</i>
        </li>
        <li>
          <span>
            <img src="../../photo/冷冻食品.png" alt="">
          </span>
          <i>冷冻食品</i>
        </li>
      </ul>
      <ul class="yuan-bottom" >
        <li>
          <span>
            <img src="../../photo/罐头食品.png" alt="">
          </span>
          <i>罐头食品</i>
        </li>
        <li>
          <span>
            <img src="../../photo/速冻食品.png" alt="">
          </span>
          <i>速冻食品</i>
        </li>
        <li>
          <span>
            <img src="../../photo/食品_三明治.png" alt="">
          </span>
          <i>餐食烘焙</i>
        </li>
        <li>
          <span>
            <img src="../../photo/食品_鸡蛋.png" alt="">
          </span>
          <i>蛋类区</i>
        </li>
        <li>
          <span>
            <img src="../../photo/膨化食品.png" alt="">
          </span>
          <i>膨化食品</i>
        </li>
      </ul>
    </div>
    <!--/ 圆巴巴 -->
  </div>
</template>

<script>
export default {
  components: {

  },
  props: {

  },
  data () {
    return {
      value: ''
    }
  },
  watch: {

  },
  computed: {

  },
  created () {
    this.giveClickEvent()
  },
  mounted () {

  },
  methods: {
    giveClickEvent () {
      setTimeout(_ => {
        this.$refs.topUlRef.addEventListener('click', _ => {
          // console.dir(_.target.localName)
          if (_.target.localName === 'img') { this.$router.push('/goods') }
        })
      }, 0)

      // const lis = document.querySelectorAll('ul li')
      // lis.forEach(item => {
      //   console.log(item)
      //   item.onclick = function () {
      //     console.log(1)
      //     this.$router.push('/goods')
      //   }
      // })
    }
  }
}
</script>

<style scoped lang="less">
  .photo {
    border-radius: 20px;
      .van-image {
        padding:0 10px 0 38px;
     }
  }
  .yuanxing {
    .yuan-top,.yuan-bottom {
      li {
        position: relative;
        height: 150px;
        float: left;
        margin-top: 20px;
        span {
          position: relative;
          display: block;
          background-color: #e1d0c1;
          width: 120px;
          height: 120px;
          border-radius: 50%;
          margin: 15px;
          img {
            position: absolute;
            bottom: 15px;
            left: 12px;
            width: 80%;
            height: 80%;
          }
          .iconfont {
            font-size: 80px;
            color: #e9855a;
            padding-left: 15px ;
            line-height: 120px;
          }
        }
        i {
          width: 150px;
          position: absolute;
          top: 115px;
          font-size: 16px;
          font-style: normal;
          margin: 30px;
        }
      }
    }
  }

</style>
